<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="createTime" label="评价时间" width="350" />
    <el-table-column prop="bookName" label="书名" width="350" />
    <el-table-column prop="star" label="星级" width="310" />
    <el-table-column label="操作" width="280">
        <template #default="scope">
            <el-button @click="show(scope.row.id)">查看详情</el-button>
        <el-button @click="delteeById(scope.row.id)">删除</el-button>
        </template>

    </el-table-column>
  </el-table>
  </div>




  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
  >
  <div>评分~
    <el-rate v-model="rate" :colors="colors" />
  </div>
    <div>
        评论~
<el-input
    v-model="commend"
    :rows="5"
    type="textarea"
    placeholder="Please input"
  />
    </div>
  

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dochange">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang='ts'>
import { ref,reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { getAllByUserName ,getById ,updata,del} from '@/api/bookMsg'
import { useCounterStore  } from '@/stores/counter';
import { ElMessage } from 'element-plus';
const store = useCounterStore()
const tableData = ref()
const dialogVisible = ref(false)
const commend = ref()
const rate  = ref()
const id  = ref()
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) 
getAllByUserName(store.getUser()?.userName as string).then(res => {
    tableData.value = res.data.data
})
const show = (_id :string) => {
    getById(_id).then(res => {
        console.log(res.data.data);
        commend.value = res.data.data.msg
        rate.value = res.data.data.star 
        id.value = _id;
        dialogVisible.value = true
    })
}
const dochange = () => {
    dialogVisible.value = false
    updata({commend:commend.value,star:rate.value,id:id.value}).then(res => {
        ElMessage(
            {
                message:'修改成功',
                type:'success'
            }
        )
        getAllByUserName(store.getUser()?.userName as string).then(res => {
    tableData.value = res.data.data
})
    })
}
const delteeById = (id:string) => {
    del(id).then(res => {
        ElMessage({
            message:'删除成功',
            type:'success'
        })
        getAllByUserName(store.getUser()?.userName as string).then(res => {
    tableData.value = res.data.data
})
    })
}
</script>
<style scoped>
</style>